   <div class="container-fluid">
      <div class="row-fluid">
         <div class="metro span12">
            <div class="metro-sections">
   
               <div id="section1" class="metro-section tile-span-4">
   
                  <h2>EDI Transaction</h2>
                  <!--
   <a href="#modal" class="second">Link text</a>
   <div id="modal" style="display:none">    
   <h2>Modal</h2>    
   <a href="javascript:$.pageslide.close()">Close</a></div>
   <script>    
   $(".second").pageslide({ direction: "left", modal: true });
   </script>-->
 
                     <a class="tile wide imagetext bg-color-blueDark" href="javascript:$.pageslide({ direction: 'left', href:'<?php print base_url(); ?>/private/profile' })">
                     <div class="image-wrapper">
                        <img src="<?php print base_url(); ?>/content/img/order.png" />
                     </div>
                     <div class="column-text">
                        <div class="text4">Search and view of all POs details information</div>
                     </div>
                     <div class="app-label">Buyer EDI Purchase Order</div>
                  </a>
   
                  <a class="tile wide imagetext wideimage bg-color-orange" href="./appbar-demo.html">
                     <img src="<?php print base_url(); ?>/content/img/notice.png" alt=""/>
                     <div class="textover-wrapper bg-color-blue">
                        <div class="text2">EDI Advance Ship Notice</div>
                     </div>
                  </a>
   
                  <a class="tile app wide bg-color-greenDark" href="./table.html">
                     <div class="image-wrapper">
                        <span class="icon icon-new"></span>
                     </div>
                     <div class="app-label">Generate PDF Files for EDI PO Batch</div>
                  </a>
   
                  <a class="tile app bg-color-purple" href="./listviews.html">
                     <div class="image-wrapper">
                        <span class="icon icon-copy"></span>
                     </div>
                     <span class="app-label">Shipment Variance Report</span>
                  </a>
   
                  <a class="tile app bg-color-red" href="./charms-demo.html">
                     <div class="image-wrapper">
                        <span class="icon icon-aperture-alt"></span>
                     </div>
                     <span class="app-label">comming soon</span>
                  </a>
   
                  <a class="tile app bg-color-yellow" href="./images.html">
                     <div class="image-wrapper">
                        <span class="icon icon-aperture-alt"></span>
                     </div>
                     <span class="app-label">comming soon</span>
                  </a>
   
                  <a class="tile app bg-color-blueDark" href="./icons.html">
                     <div class="image-wrapper">
                        <span class="icon icon-aperture-alt" ></span>
                     </div>
                     <span class="app-label">comming soon</span>
                  </a>
   
               </div>
   <div class="win-backbutton" style="margin-left: 1300px; margin-top: -9px;;x-index:100;position: absolute;"></div>
               <div id="section2" class="metro-section tile-span-4">
   
                  <h2>Report</h2>
   
                  <a class="tile wide imagetext bg-color-blue" href="./scaffolding.html">
                     <div class="image-wrapper">
                        <span class="icon icon-list-2"></span>
                     </div>
                     <div class="column-text">
                        <div class="text"> &nbsp;Past-Due(With ASN)</div>
                        <div class="text"> &nbsp;Buyer Purchase</div>
                        <div class="text"> &nbsp;Order Listing</div>
                     </div>
                     <span class="app-label"> </span>
                  </a>
   
                  <a class="tile wide imagetext bg-color-blueDark" href="./base-css.html">     
                     <div class="image-wrapper">
                     <span class="icon icon-aperture-alt" ></span>
                     </div>
                     <div class="column-text">
                        <div class="text">comming soon</div>
                       <!-- <div class="text">Tables</div>
                        <div class="text">Forms</div>
                        <div class="text">Buttons</div>-->
                     </div>
                     <span class="app-label"></span>
                  </a>
   
                  <a class="tile app bg-color-orange" href="./components.html">
                     <div class="image-wrapper">
                        <img src="<?php print base_url(); ?>/content/img/RegEdit.png" alt="" />
                     </div>
                     <span class="app-label">Buyer Purchase Order Log Report</span>
                  </a>
   
                  <a class="tile app bg-color-red" href="./javascript.html">
                     <div class="image-wrapper">
                        <img src="<?php print base_url(); ?>/content/img/Devices.png" alt="" />
                     </div>
                     <span class="app-label">Buyer PO Shipment By Quarter Report</span>
                  </a>
   
               </div>
   
               <!--<div id="section3" class="metro-section tile-span-2">-->
                  <!--<h2>Category 3</h2>-->
                  <!--<div class="tile tile-double bg-color-blue">-->
                     <!--<div class="tile-icon-large">-->
                        <!--<img src="content/img/Live%20SkyDrive.png" />-->
                     <!--</div>-->
                     <!--<span class="tile-label">Live SkyDrive</span>-->
                  <!--</div>-->
                  <!--<div class="tile bg-color-blueDark">-->
                     <!--<div class="tile-icon-large">-->
                        <!--<img src="content/img/Bluetooth.png" />-->
                     <!--</div>-->
                     <!--<span class="tile-label">Bluetooth</span>-->
                  <!--</div>-->
                  <!--<div class="tile bg-color-red">-->
                     <!--<div class="tile-icon-large">-->
                        <!--<img src="content/img/Control%20Panel.png" />-->
                     <!--</div>-->
                     <!--<span class="tile-label">Control Panel</span>-->
                  <!--</div>-->
                  <!--<div class="tile bg-color-green">-->
                     <!--<div class="tile-icon-large">-->
                        <!--<img src="content/img/Signal.png" />-->
                     <!--</div>-->
                     <!--<span class="tile-label">WiFi Settings</span>-->
                  <!--</div>-->
                  <!--<div class="tile bg-color-yellow">-->
                     <!--<div class="tile-icon-large">-->
                        <!--<img src="content/img/Computer%20alt%202.png" />-->
                     <!--</div>-->
                     <!--<span class="tile-label">My Computer</span>-->
                  <!--</div>-->
               <!--</div>-->
   
            </div>
   
            <!-- <a id="tiles-scroll-prev" class="win-command carousel-control left" href="#metro-carousel" data-slide="prev">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <a id="tiles-scroll-next"  class="win-command carousel-control right" href="#metro-carousel" data-slide="next">
               <span class="win-commandimage win-commandring">&#xe059;</span>
            </a> -->
   
         </div>
      </div>
   </div>
   
   
   <div id="charms" class="win-ui-dark">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-command">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
         <?php
print form_open('private/home/update_account', array('id' => 'profile_form', 'class' => 'membership_form')) ."\r\n";
?>
<div class="membership_box">
    <div id="error">
        <?php
        if ($this->session->flashdata('message')) {
            print "<div class=\"error_box\">". $this->session->flashdata('message') ."</div>";
        }
        ?>
    </div>
</div>
<h2><?php print $this->lang->line('edit_profile'); ?></h2>
<div class="form_label"><?php print form_label($this->lang->line('first_name'), 'profile_first_name'); ?></div>
<div class="input_box"><?php print form_input(array('name' => 'first_name', 'id' => 'profile_first_name', 'value' => $first_name, 'class' => 'qtip_first_name')); ?></div>
<div class="form_label"><?php print form_label($this->lang->line('last_name'), 'profile_last_name'); ?></div>
<div class="input_box"><?php print form_input(array('name' => 'last_name', 'id' => 'profile_last_name', 'value' => $last_name, 'class' => 'membership_text_field qtip_last_name')); ?></div>
<div class="text_black"><?php print $this->lang->line('current_email') .": <strong>". $email; ?></strong></div>
<div class="form_label"><?php print form_label($this->lang->line('change_email'), 'profile_email');?></div>
<div class="input_box"><?php print form_input(array('name' => 'email', 'id' => 'profile_email', 'class' => 'membership_text_field qtip_email')) ."\r\n";
?>
<div id="email_valid"></div>
<div id="email_taken"></div>
</div>
<div class="text_black"><?php print $this->lang->line('password_required_for_changes'); ?></div>
<div class="input_box"><?php print form_password(array('name' => 'password', 'id' => 'profile_password', 'class' => 'membership_text_field')); ?></div>
<div><?php print form_submit(array('name' => 'submit', 'value' => $this->lang->line('update_profile'), 'id' => 'profile_submit', 'class' => 'membership_submit')); ?></div>
<?php print form_close() ."\r\n"; ?>
<div class="centerbox_bot">
</div>
<div class="centerbox_top">
</div>
<?php print form_open('private/home/update_password', array('id' => 'profile_pwd_form', 'class' => 'membership_form')) ."\r\n";
?>
<div class="membership_box">
    <div id="pwd_error">
        <?php
        if ($this->session->flashdata('pwd_message')) {
            print "<div class=\"error_box\">". $this->session->flashdata('pwd_message') ."</div>";
        }
        ?>
    </div>
</div>
<h2><?php print  $this->lang->line('edit_password'); ?></h2>
<div class="form_label"><?php print form_label($this->lang->line('current_password'), 'current_password'); ?></div>
<div class="input_box"><?php print form_password(array('name' => 'current_password', 'id' => 'current_password', 'class' => 'membership_text_field')); ?></div>
<div class="form_label"><?php print form_label($this->lang->line('new_password'), 'profile_new_password'); ?></div>
<div class="input_box"><?php print form_password(array('name' => 'new_password', 'id' => 'profile_new_password', 'class' => 'membership_text_field qtip_password')); ?></div>
<div class="form_label"><?php print form_label($this->lang->line('new_password_again'), 'new_password_again'); ?></div>
<div class="input_box"><?php print form_password(array('name' => 'new_password_again', 'id' => 'new_password_again', 'class' => 'membership_text_field')); ?></div>
<?php print form_hidden('email', $email); ?>
<div class="text_black"><?php print $this->lang->line('send_copy_to_email') . form_checkbox(array('name' => 'send_copy', 'value' => 'accept', 'checked' => TRUE, 'class' => 'checkbox')); ?></div>
<div><?php print form_submit(array('name' => 'submit', 'value' => $this->lang->line('update_password'), 'id' => 'profile_pwd_submit', 'class' => 'membership_submit')); ?></div>
<?php print form_close() ."\r\n"; ?>
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>

   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>

   <script type="text/javascript">
      $(".metro").metro();
   </script>

